<template>
	<view>
		<cu-custom :bgColor="'bg-'+ theme.themeColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">推广名片</block>
		</cu-custom>
		<view class="flex justify-center align-center">
			<image :src="path" mode="widthFix"></image>
			<l-painter ref="painter"></l-painter>
			<!-- :board="poster" isCanvasToTempFilePath @success="path = $event" -->
		</view>
		<view>
			<!--  #ifndef H5 -->
			<button class="cu-btn shadow-blur block margin-sm round bottom-btn " :class="'bg-'+theme.themeColor"
				@click="save">立即保存</button>
			<!-- #endif -->
			<!--  #ifdef H5 -->
			<button class="cu-btn shadow-blur block margin-sm round bottom-btn "
				:class="'bg-'+theme.themeColor">长按图片保存</button>
			<!-- #endif -->


		</view>

	</view>
</template>

<script>
	import {
		getWxQrCode
	} from '@/api/wxqrcode.js';
	import {
		getDistributionConfig
	} from '@/api/distributionconfig.js';

	import base64 from '@/utils/base64.js';
	export default {
		data() {
			return {
				theme: getApp().globalData.theme,
				userInfo: this.$store.state.user.userInfo,
				path: '',
				qrCodeImg: '',
				distributionConfig: {}
			}
		},
		onLoad() {
			this.getDistributionConfig();
			this.getWxQrCode();
		},
		methods: {
			getWxQrCode() {
				getWxQrCode({
					scene: '1&' + this.userInfo.userNumber,
					page: 'pages/home/index',
					envVersion: 'release'
				}).then(res => {
					uni.showLoading({
						title: '海报生成中'
					});
					// #ifdef MP
					base64.getBase64ImagePath(res.data, '').then(res => {
						this.qrCodeImg = res;
						this.getPath();
					});
					//	#endif
					//  #ifndef MP 
					this.qrCodeImg = 'data:image/jpeg;base64,' + res.data;
					this.getPath();
					//	#endif
				});
			},

			getDistributionConfig() {
				getDistributionConfig({}).then(res => {
					this.distributionConfig = res.data
				});
			},
			save() {
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success(res) {
						uni.showToast({
							title: '保存到相册成功',
							icon: 'none',
							duration: 3000
						});
					}
				});
			},
			getPath() {
				// 生成图片
				// 渲染
				let poster = {
					css: {
						width: "750rpx",
						paddingBottom: "40rpx",
					},
					views: [{
						css: {
							marginLeft: "40rpx",
							marginTop: "30rpx",
							padding: "32rpx",
							boxSizing: "border-box",
							background: "#fff",
							borderRadius: "16rpx",
							width: "670rpx",
							boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
						},
						views: [{
							src: this.distributionConfig.picUrls,
							type: "image",
							css: {
								objectFit: "cover",
								objectPosition: "50% 50%",
								width: "606rpx",
								height: "606rpx"
							},
						}, {
							css: {
								marginTop: "30rpx"
							},
							views: [{
								text: (this.userInfo.nickName ? this.userInfo.nickName : '') +
									"邀请您加入环兴商城",
								type: "text",
								css: {
									paddingRight: "32rpx",
									boxSizing: "border-box",
									lineClamp: 2,
									color: "#333333",
									lineHeight: "1.8em",
									fontSize: "36rpx",
									width: "476rpx"
								},
							}, {
								src: this.qrCodeImg,
								type: "image",
								css: {
									width: "130rpx",
									height: "130rpx",
								},

							}],
							type: "view"
						}],
						type: "view"
					}]
				}
				this.$refs.painter.render(poster);
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					pathType: 'url',
					quality: 1,
					success: (res) => {
						console.log(res)
						this.path = res.tempFilePath;
						uni.hideLoading();
					},
					fail: (err) => { //失败操作
						uni.hideLoading();
					},
				});
			}
		}
	}
</script>

<style>
</style>
